<template>
  <div class="index-wrapper">
    <header>聚美优品 + </header>
    <main>
      <router-view></router-view>
    </main>
    <nav>
      <van-tabbar 
        v-model="active"
        active-color="#cb4d42"
        route
      >
        <van-tabbar-item 
          icon="home-o"
          to="../Hot"
        >
          <span>今日爆款</span>
          <template #icon="props">
            <svg width="28" height="28" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>电影1</title><g :fill="props.active | fill" fill-rule="evenodd"><path d="M24.994 47c-.71 0-1.422-.034-2.136-.102C12.445 45.913 4.14 37.645 3.11 27.24c-.657-6.63 1.65-13.115 6.332-17.796 4.68-4.68 11.162-6.992 17.796-6.333 10.36 1.027 18.624 9.29 19.65 19.65.592 5.984-1.192 11.796-5.022 16.365-.162.193-.158.463.007.63l3.425 3.424c.586.584.586 1.534 0 2.12-.586.586-1.535.586-2.12 0l-3.426-3.425c-1.274-1.273-1.353-3.284-.185-4.677 3.307-3.946 4.847-8.97 4.335-14.142-.886-8.942-8.018-16.074-16.96-16.96-5.732-.562-11.336 1.426-15.38 5.47-4.042 4.042-6.034 9.647-5.467 15.378.89 8.98 8.058 16.117 17.045 16.968 3.867.37 7.68-.417 11.03-2.267.725-.4 1.637-.138 2.037.588.4.725.137 1.638-.588 2.038-3.26 1.8-6.896 2.73-10.626 2.73"></path><path d="M28 16c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3M28 34c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3M34 28c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3M16 28c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3"></path></g></svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item 
          to="../Cart"
        >
          <span>购物车</span>
          <template #icon="props">
            <svg t="1627984587522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1578" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><g :fill="props.active | fill"><path d="M864 853.333333a32 32 0 0 1 0 64H160a32 32 0 0 1 0-64z m-42.666667-746.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v540.309333a42.666667 42.666667 0 0 1-78.336 23.402667L672.405333 501.344C628.48 522.816 574.912 533.333333 512 533.333333s-116.48-10.517333-160.405333-31.989333L163.669333 787.712A42.666667 42.666667 0 0 1 85.333333 764.309333V224c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666z m0 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v468.906667l165.248-251.797334a32 32 0 0 1 44.501334-9.066666C395.978667 456.64 446.762667 469.333333 512 469.333333s116.021333-12.693333 152.917333-37.290666a32 32 0 0 1 44.501334 9.066666L874.666667 692.917333V224a53.333333 53.333333 0 0 0-53.333334-53.333333z" p-id="1579"></path></g></svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item 
          to="../mine"
        >
          <span>我的</span>
          <template #icon="props">
            <svg width="28" height="28" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>我的1</title><g :fill="props.active | fill" fill-rule="evenodd"><path d="M19.916 35.913c-.014-.016-.02-.036-.033-.05-.314-.32-.737-.455-1.153-.432C13.586 33.066 10 27.9 10 21.908 10 13.687 16.728 7 25 7c8.27 0 15 6.687 15 14.907 0 8.22-6.73 14.906-15 14.906-1.787 0-3.493-.328-5.084-.9zm14.502 1.225C39.558 33.98 43 28.343 43 21.908 43 12.032 34.925 4 25 4S7 12.033 7 21.907c0 6.657 3.68 12.466 9.113 15.552l-6.086 5.97c-.59.58-.6 1.53-.02 2.12.294.3.682.45 1.07.45.38 0 .76-.143 1.052-.43l6.916-6.785c1.867.654 3.865 1.028 5.954 1.028 2.324 0 4.54-.455 6.58-1.256l7.15 7.014c.292.287.672.43 1.05.43.39 0 .78-.15 1.072-.45.58-.59.57-1.54-.02-2.12l-6.414-6.292z"></path><path d="M30.358 25.068c-.77-.31-1.642.064-1.95.832-.554 1.375-1.89 2.263-3.408 2.263-1.503 0-2.835-.877-3.395-2.234-.316-.766-1.19-1.13-1.96-.815-.765.316-1.13 1.193-.813 1.96 1.024 2.483 3.446 4.088 6.168 4.088 2.75 0 5.178-1.627 6.19-4.144.31-.77-.063-1.643-.832-1.952"></path></g></svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </nav>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  components: {
    
  },

  data() {
    return {
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
    }
  },

  filters: {
    fill(active) {
      return active ? '#cb4d42' : '#666'
    }
  }
}
</script>

<style scoped>
.index-wrapper{
  position:absolute;
  left:0;
  top: 0;
  width :100%;
  height :100%;
  display: flex;
  flex-direction: column;
}
header{
    height: 2.46rem;
    background-color: #cb4d42;
    text-align: center;
    line-height: 2.44rem;
    color: #fff;
    font-size: 1.78rem;
}
  main{
    flex: 1;
    overflow: hidden;
  }
  nav{
    height: .5rem;
  }
.van-tabbar-item{
  line-height: .1rem;
}
</style>